<template>
  <div class="page">
    <!-- img -->
    <van-image :src="info.img" fit="cover" style="width: 100%;height: 230px;"></van-image>

    <!-- title & price-->
    <div style="display: flex; padding: 12px; background-color: #ffffff;min-height: 35px;">
      <div style="font-size: 20px; flex: 1">{{ info.name }}</div>
      <div style="font-size: 14px; width: 64px; text-align: center">
        ${{ info.price }}
      </div>
    </div>

    <!-- desc -->
    <div style="font-size: 14px;color: #999999;padding: 12px;background-color: #fff;">
      {{info.desc}}
    </div>

    <!-- item -->
    <div style="padding: 12px;background-color: #fff;padding-top: 0;" v-for="(item,idx) in info.subfoods" :key="idx">
      <div style="font-size: 20px;">{{item.title}}</div>
      <div style="margin-top: 12px;border: 1px solid #ebebeb;padding: 12px;padding-top: 0;">
        <van-radio-group v-model="selectedSku" v-for="(obj, index) in item.sku" :key="index" style="padding: 0 12px">
          <div>
            <div style="height: 1px;background-color: #ebebeb;margin-top: 12px;" v-if="index != 0"></div>
            <van-radio :name="item.id" style="padding-top: 12px;">
              <div style="
                      height: auto;
                      padding: 0 12px;
                      display: flex;
                      justify-content: space-between;
                    ">
                <div style="font-size: 14px;">{{ obj.name }}</div>
                <div style="font-size: 14px;">{{ obj.price }}</div>
              </div>

            </van-radio>
          </div>

        </van-radio-group>
      </div>
    </div>

    <!-- remark -->
    <div style="margin-top: 12px; padding: 12px; background-color: #ffffff">
      <!-- remark title and take away -->
      <div style="display: flex;align-items: center;justify-content: space-between;background-color: #fff;">
        <div style="font-size: 20px">备注</div>
        <div style="display: flex;align-items: center;">
          <div style="font-size: 20px;margin-right: 6px;">打包</div>
          <van-switch v-model="order.takeaway" size="24" active-color="#4cd964" />
        </div>
      </div>

      <div style="
        margin-top: 12px;
        color: #999999;
        height: 35px;
        background-color: #f5f5f5;
        line-height: 35px;
        padding: 0 12px;
        border: 1px solid #ebebeb;
      " @click="remarkClickHandle()" v-if="order.remarks.length == 0">
        Select Remark
      </div>
      <div style="
        margin-top: 12px;
        height: 35px;
        background-color: #f5f5f5;
        line-height: 35px;
        padding: 0 12px;
        border: 1px solid #ebebeb;
      " @click="remarkClickHandle()" v-else>
        {{ order.remarks.toString() }}
      </div>
    </div>

    <!-- button -->
    <div style="background-color: #fff;padding: 12px;margin-top: 12px;">
      <div style="display: flex;align-items: center;justify-content: space-between;">
        <div style="display: flex;border: 1px solid #ebebeb;background-color: #0f0;">
          <input type="number" v-model="selectedCount"
            style="border: none;font-size: 14px;height: 36px;padding-left: 12px;display: block;width: 200px;border-radius: 0;"
            placeholder="选择数量">
          <div style="width: 40px;background-color: #ffffff;display: flex;justify-content: center;align-items: center;"
            @click="showCountPopHandle()">
            <i class="Icon">arrow_drop_down</i>
          </div>
        </div>
        <van-button type="primary" style="
            min-width: 90px;
            background-color: #4cd964;
            border: none;
          " @click="addFoodHandle()">下单
        </van-button>
      </div>
    </div>

    <!-- navbar -->
    <div class="navbar">
      <i class="Icon" style="color: #ffffff; font-size: 20px" @click="backHandle()">arrow_back_ios_new</i>
    </div>

    <!-- count list -->
    <van-popup v-model="showCountModal" position="bottom" :style="{ height: '60%',paddingBottom:'12px' }">
      <div style="padding: 12px;">Select Count</div>
      <div v-for="(item, idx) in 20" :key="idx" style="
          padding: 12px;
          border-bottom: 1px solid #ebebeb;
          display: flex;
          align-items: center;
        " @click="selectCountHandle(item)">
        <div style="flex: 1; font-size: 16px; color: #333333">{{ item }}</div>
        <i class="Icon" style="font-size: 14px; color: #4cd964" v-if="selectedCount == item">done</i>
      </div>
    </van-popup>

    <!-- remark list -->
    <van-popup v-model="showModal" position="bottom" :style="{ height: '60%' }">
      <div style="padding: 12px; font-weight: bold">Select Remark</div>
      <div v-for="(item, idx) in remarks" :key="idx" style="
          padding: 12px;
          border-bottom: 1px solid #ebebeb;
          display: flex;
          align-items: center;
        " @click="selected(idx)">
        <div style="flex: 1; font-size: 14px; color: #666666">{{ item }}</div>
        <i class="Icon" style="font-size: 14px; color: #4cd964" v-if="order.remarks.includes(item)">done</i>
      </div>
    </van-popup>

    <!-- buytype -->
    <van-action-sheet v-model="showBuyType" :actions="actions" @select="selectBuytypeHandle" cancel-text="取消" />
    <!-- time and pepole -->
    <van-popup v-model="showTimeAndNum">
      <div style="width: calc(100vw - 24px);border-radius: 8px;overflow: hidden;">
        <div style="padding: 12px;">
          <!-- title -->
          <div style="display: flex;align-items: center;">
            <div style="font-size: 14px;">hello,</div>
            <div style="font-size: 14px;">jeking</div>
          </div>
          <!-- tip -->
          <div style="font-size: 14px;margin-top: 6px;">请输入订桌信息/打包信息</div>
          <!-- date -->
          <div
            style="margin-top: 6px;display: flex;align-items: center;justify-content: space-between;background-color: #fff;padding: 0 12px;"
            @click="clickDateHandle()">
            <div style="padding: 6px 0;">{{selectDate}}</div>
            <i class="Icon">today</i>
          </div>
          <!-- time -->
          <div
            style="margin-top: 6px;display: flex;align-items: center;justify-content: space-between;background-color: #fff;padding: 0 12px;"
            @click="clickTimeHandle()">
            <div style="padding: 6px 0;">{{selectTime}}</div>
            <i class="Icon">schedule</i>
          </div>
          <!-- date -->
          <div
            style="margin-top: 6px;display: flex;align-items: center;justify-content: space-between;background-color: #fff;padding: 0 12px;">
            <input type="text" placeholder="Enter Member Num" style="border: none;padding: 6px 0;" v-model="pepoleNum">
            <i class="Icon">groups</i>
          </div>

          <div style="padding: 12px 0;">
            <div
              style="height: 35px;text-align: center;background-color: rgb(34, 182, 78);line-height: 35px;color: #fff;">
              确定</div>
          </div>

        </div>
      </div>
    </van-popup>


    <!-- eat date -->
    <van-popup v-model="showdate" position="bottom" :style="{ height: '50%' }">
      <van-calendar title="日历" :poppable="false" :show-confirm="false" :style="{ height: '500px' }"
        @confirm="dateconfirm" />
    </van-popup>
    <!-- eat time -->
    <van-popup v-model="showtime" position="bottom" :style="{ height: '50%' }">
      <van-datetime-picker v-model="order.time" type="time" title="选择时间" :min-hour="0" :max-hour="24"
        @confirm="timeConfirmHandle" />
    </van-popup>
    <!-- eat pepole num -->
    <van-popup v-model="showpepolenum" position="bottom" :style="{
        height: '30%',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'space-between',
      }">
      <div style="padding: 12px">
        <div>Number of diners</div>
        <van-field type="num" label="" placeholder="Input pepoleNum" v-model="order.pepoleNum"
          style="background-color: #f0f0f0; margin: 12px 0" />
      </div>
      <van-button type="primary" block @click="doneNumHandle">Done</van-button>
    </van-popup>
  </div>
</template>

<script>
  import dayjs from "dayjs"
  export default {
    data() {
      return {
        currentOrder: {
          buyType: -1,//0 take away 1 in house
          action: undefined,
          time: undefined,
          pepoleNum: 1,
          foods: [],
          remarks: [],
          totalFee: 0.0,
          takeaway: true,
        },
        showBuyType: false,
        showTimeAndNum: false,
        showCountModal: false,
        selectedCount: 1,
        showtime: false,
        showdate: false,
        selectDate: dayjs().format("YYYYMMDD"),
        selectTime: dayjs().format("HH:mm"),
        pepoleNum: 1,




        order: {
          action: undefined,
          time: undefined,
          pepoleNum: 1,
          foods: [],
          remarks: [],
          totalFee: 0.0,
          takeaway: true,
        },

        // scan id is 3
        actions: [
          {
            name: "Take Away",
            id: 0,
          },
          {
            name: "Dine in store",
            id: 1,
          },
        ],
        showpepolenum: false,

        remarks: [
          "Remark0",
          "Remark1",
          "Remark2",
          "Remark3",
          "Remark4",
          "Remark5",
          "Remark6",
        ],
        remarkIdx: 0,
        showModal: false,
        buyType: -1,
        selectedSku: 0,
        info: {
          name: "火锅",
          desc: "描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述描述",
          img: "https://img.zcool.cn/community/01196456c7cb1c32f875520fc7ede6.jpg@1280w_1l_2o_100sh.jpg",
          price: "208",
          subfoods: [
            {
              title: "drink",
              sku: [
                {
                  id: "d1",
                  name: "cocol",
                  price: "",
                },
                {
                  id: "d2",
                  name: "orange",
                  price: "+1.00",
                },
                {
                  id: "d3",
                  name: "water",
                  price: "+1.20",
                },
              ],
            },
            {
              title: "bread",
              sku: [
                {
                  id: "b1",
                  name: "sweat",
                  price: "+2.00",
                },
              ],
            },
          ],
        },
      };
    },
    mounted() {
      let json = localStorage.getItem("shopcar");
      if (json != undefined && json.length != 0) {
        this.order = JSON.parse(json);
      }
    },
    methods: {
      backHandle() {
        this.$router.go(-1);
      },

      selected(idx) {
        let selectremarks = this.order.remarks;
        let rm = this.remarks[idx];
        let i = selectremarks.indexOf(rm);
        if (i == -1) {
          selectremarks.push(rm);
        } else {
          selectremarks.splice(i, 1);
        }
        this.order.remarks = selectremarks;
      },
      remarkClickHandle() {
        this.showModal = true;
      },
      addFoodHandle() {
        let { buyType } = this.currentOrder;
        if (buyType == -1) {//should select buytype
          this.showBuyType = true;
        } else {
          this.addFood();
        }
      },

      selectBuytypeHandle(item) {
        this.currentOrder.buyType = item.id;
        this.showBuyType = false;
        this.showTimeAndNum = true;
        // this.order.action = item.id;
        // this.showtime = true;
      },

      timeConfirmHandle(e) {
        this.order.time = e;
        if (this.order.action == 0) {
          this.showtime = false;
        } else {
          this.showtime = false;
          this.showpepolenum = true;
        }
      },

      doneNumHandle() {
        this.showpepolenum = false;
      },

      addFood() {
        let { foods, totalFee } = this.order;

        let food = {
          ...this.info,
          selectedSku: this.selectedSku,
        };

        let { sku } = food;

        foods.push(food);
        let cs = {};
        for (let s of sku) {
          if (s.id == this.selectedSku) {
            cs = s;
            break;
          }
        }

        //
        if (cs.price.length == 0 || cs.price == 0) {
          cs.price = "0.00";
        }

        totalFee += parseFloat(food.price) + parseFloat(cs.price);
        this.order.totalFee = totalFee;

        localStorage.setItem("shopcar", JSON.stringify(this.order));
      },

      shopCarHandle() {
        this.$router.push({
          path: "/shopcar",
        });
      },

      // 显示数量
      showCountPopHandle() {
        this.showCountModal = true;
      },
      selectCountHandle(idx) {
        this.selectedCount = idx;
      },

      clickTimeHandle() {
        this.showtime = true;
      },
      clickDateHandle() {
        this.showdate = true;
      },
      dateconfirm(date) {
        this.selectDate = dayjs(date).format("YYYYMMDD")
        this.showdate = false
      }
    },
  };
</script>


<style>
  .van-index-bar__sidebar {
    display: none;
  }

  .van-radio__label {
    width: 100%;
  }
</style>

<style scoped>
  .page {
    position: relative;
    background-color: #f5f6f7;
    padding-bottom: 64px;
    overflow-y: auto;
    flex: 1;
  }

  .shopcar {
    height: 44px;
    width: 44px;
    border-radius: 22px;
    background-color: #ffffff;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 20px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;

    margin-top: constant(safe-area-inset-top);
    margin-bottom: constant(safe-area-inset-bottom);
    /* 兼容 iOS < 11.2 */
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
  }

  .navbar {
    height: 40px;
    position: fixed;
    left: 0;
    top: 20px;
    padding-left: 12px;
    display: flex;
    align-items: center;

    margin-top: constant(safe-area-inset-top);
    margin-bottom: constant(safe-area-inset-bottom);
    /* 兼容 iOS < 11.2 */
    margin-top: env(safe-area-inset-top);
    margin-bottom: env(safe-area-inset-bottom);
  }
</style>